<template>
  <div style="padding: 32px;">
    <h1>上传并处理 Amazon-URL-TXT 文件</h1>
    <form @submit.prevent="handleSubmit">
      <input type="file" accept=".txt" @change="handleFileUpload" />
      <button type="submit">提交</button>
    </form>
    <div v-if="processedContent">
      <h2>处理后的内容:</h2>
      <textarea :value="processedContent" readonly rows="10" cols="50"></textarea>
      <button @click="downloadFile">下载处理后的文件</button>
    </div>
  </div>
</template>
  
  <script>
  export default {
    data() {
      return {
        rawContent: '',
        processedContent: '',
        fileBlob: null,
        parsedUrls: []
      };
    },
    methods: {
      handleFileUpload(event) {
        const file = event.target.files[0];
        if (file && file.type === 'text/plain') {
          const reader = new FileReader();
          reader.onload = (e) => {
            this.rawContent = e.target.result;
            // 在这里可以添加对 rawContent 的初步验证或处理
          };
          reader.readAsText(file);
        } else {
          alert('请上传一个有效的 TXT 文件');
        }
      },
      handleSubmit() {
        if (!this.rawContent) {
          alert('请先上传一个 TXT 文件');
          return;
        }
        // 对 rawContent 进行处理，这里假设的处理规则是将每个 URL 转换为其长度并加上前缀 "URL_LENGTH:"
        const lines = this.rawContent.split('\n');

        let $this = this;

        let parsedUrls = lines.map(line => {
          try {
            const urlObject = new URL(line); // 尝试将每行解析为 URL
            let domain = urlObject.hostname; // 提取域名
  
            // 提取查询参数并转换为对象
            let params = new URLSearchParams(urlObject.search).entries().reduce((acc, [key, value]) => {
              acc[key] = decodeURIComponent(value); // 解码 URL 编码的参数值
              return acc;
            }, {});
  
            let rh = $this.getLastPart(params.rh)

            let rhNum = rh.split(":")[1];

            // 返回包含域名和参数的对象
            return "https://" + domain + "/s?i=hpc&rh=" + rh + "&s=popularity-rank&fs=true&ref=lp_" + rhNum + '_sar';  
          } catch (error) {
            console.error('URL解析错误:', error, '对于 URL:', line);
            // 如果解析失败，可以返回一个表示错误的对象或 null
            return { error: 'Invalid URL', url: line };
          }
        });


        //const processedLines = lines.map(line => `URL_LENGTH:${line.length}`);
        this.processedContent = parsedUrls.join('\n');
  
        // 创建处理后的文件 Blob 对象
        this.fileBlob = new Blob([this.processedContent], { type: 'text/plain;charset=utf-8' });
      },
      getLastPart(inputString){
           // 按逗号切割字符串
        const parts = inputString.split(',');
        
        // 获取最后一个部分
        const lastPart = parts[parts.length - 1];
        return lastPart;
      },
      downloadFile() {
        if (!this.fileBlob) {
          alert('请先处理文件以生成下载内容');
          return;
        }
        // 创建一个指向 Blob 对象的 URL
        const url = URL.createObjectURL(this.fileBlob);
        // 创建一个隐藏的 a 元素用于触发下载
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = 'processed_urls.txt';
        document.body.appendChild(a);
        a.click();
        // 释放 URL 对象
        URL.revokeObjectURL(url);
        document.body.removeChild(a);
      },
    },
  };
  </script>
  <style scoped>
  /* 为整个组件添加一个容器样式，以提供适当的间距和布局 */
  .container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  /* 表单样式调整 */
  form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
  }
  
  form label {
    margin-bottom: 8px;
    font-weight: bold;
  }
  
  form input[type="file"] {
    margin-bottom: 16px;
  }
  
  form button {
    padding: 10px 16px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
  }
  
  form button:hover {
    background-color: #0056b3;
  }
  
  /* 处理后内容的样式调整 */
  textarea {
    width: 100%;
    height: auto;
    min-height: 100px;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
  }
  
  /* 下载按钮的样式调整 */
  .download-button {
    margin-top: 10px;
    padding: 10px 16px;
    font-size: 16px;
    cursor: pointer;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
  }
  
  .download-button:hover {
    background-color: #218838;
  }
  </style>